<template>
  <van-pull-refresh
    v-model="loading"
    :head-height="50"
    @refresh="OnRefresh"
    :disabled="disabled"
  >
    <!-- 下拉提示，通过 scale 实现一个缩放效果 -->
    <template #pulling="props">
      <!-- <img
        class="doge"
        src="https://img01.yzcdn.cn/vant/doge.png"
        :style="{ transform: `scale(${props.distance / 80})` }"
      /> -->
      <div
        class="top_font"
        :style="{ transform: `scale(${props.distance / 80})` }"
      >
        <i class="new-icon-font new-loading2-copy-copy-copy"></i>
      </div>
    </template>

    <!-- 释放提示 -->
    <template #loosing>
      <div class="top_font am_icon">
        <i class="new-icon-font new-loading2-copy-copy-copy"></i>
      </div>
    </template>
    <!-- 加载提示 -->
    <template #loading>
      <div class="top_font am_icon">
        <i class="new-icon-font new-loading2-copy-copy-copy"></i>
      </div>
    </template>
    <div class="list_data" @scroll="UpdateScroll($event)">
      <slot></slot>
      <slot name="loading" v-if="isDownLoading">
        <div class="all_order flex-box l-c-c">加载中...</div>
      </slot>
      <slot name="allOrder" v-if="isAllOrder"
        ><div class="all_order flex-box l-c-c">全部加载完成</div></slot
      >
    </div>
  </van-pull-refresh>
</template>

<script type="javascript/text">
import { Toast } from "vant";

export default {
  props: {
    /**距离顶部多少可以触发下拉刷新 */
    topDistance: {
      type: Number || String,
      default: 0,
    },
    /**距离底部多少可以触发上滑加载 */
    botDistance: {
      type: Number || String,
      default: 100,
    },
    /**强制禁用下拉刷新 */
    disabledPullRefresh: {
      type: Boolean,
      default: false,
    },
    /**强制禁用上滑加载 */
    disabledSwipeUp: {
      type: Boolean,
      default: false,
    },
    /**加载全部数据了 */
    isAllOrder: {
      type: Boolean,
      default: false,
    },
    /**上滑加载状态 */
    isDownLoading: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      disabled: false,
      loading: false,
    };
  },
  methods: {
    OnRefresh() {
      console.log("下拉刷新");
      this.$emit("ReGetList");
    },
    /**监听列表盒子滚动条 */
    UpdateScroll: function (event) {
      // console.log(event.target.scrollTop);
      /**判断有没有被强制禁止 */
      if (this.disabledPullRefresh) {
        this.disabled = true;
      } else {
        /**确定滚动条滑动到最顶部才可以触发下拉 */
        if (event.target.scrollTop <= this.topDistance) {
          this.disabled = false;
        } else {
          this.disabled = true;
        }
      }
      /**判断有没有全部加载完数据并且没有被强制禁止 */
      if (!this.isAllOrder && !this.disabledSwipeUp) {
        /**判断滚动条在可以触发加载区域并且当前没有重复请求数据 */
        if (
          event.target.scrollHeight -
            event.target.scrollTop -
            event.target.clientHeight <=
            this.botDistance &&
          !this.isDownLoading
        ) {
          console.log("可以加载了");
          this.$emit("GetList");
        } else {
          console.log("无需加载");
        }
      }
      // console.log(event.target.scrollTop, event.target.scrollHeight);
      // console.log(event.target.scrollTop + event.target.clientHeight);
      // this.scrollTop = event.target.scrollTop;
      // this.scrollLeft = event.target.scrollLeft;
    },
  },
};
</script>

<style lang="scss" scoped>
.van-pull-refresh {
  width: 100%;
  height: 100%;
  overflow: hidden;
  :deep(.van-pull-refresh__track) {
    width: 100%;
    height: 100%;
    // overflow: hidden;
    display: flex;
    flex-direction: column;
  }
  .list_data {
    width: 100%;
    flex: 1;
    overflow-y: scroll;
  }
  .all_order {
    height: 50px;
    font-size: 14px;
  }
  .top_font {
    display: flex;
    justify-content: center;
    align-items: center;
    // padding-left:2px;
    // padding-bottom: 0px;
    i {
      font-size: 30px;
      background-image: -webkit-linear-gradient(
        -45deg,
        #caff55 20%,
        #45cd00 60%
      );
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    &.am_icon {
      animation: turn 1s linear infinite;
    }
  }
}
@keyframes turn {
  0% {
    transform: rotate(0deg);
  }

  20% {
    transform: rotate(72deg);
  }

  40% {
    transform: rotate(144deg);
  }

  60% {
    transform: rotate(216deg);
  }

  80% {
    transform: rotate(288deg);
  }

  100% {
    transform: rotate(360deg);
  }
}
</style>